<template>
  <div>
    <div class="toubudaohang flex ai-c" v-show="isShowDetails">
      <el-radio-group v-model="tabPosition">
        <el-radio-button @click.native="$router.push('/layout/videolist')" label="videolist">视频列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/imgslist')" label="imgslist">图片列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/taglist')" label="taglist">标签列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/classlist')" label="classlist">分类列表</el-radio-button>
        <el-radio-button @click.native="$router.push('/layout/videoaudit')" label="videoaudit">案例审核</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 视频列表内容 -->
    <div class="main-video" v-show="isShowDetails">
      <!-- 全部视频 -->
      <div class="main-all-video" v-show="videoList === 0">
        <div class="main-all-content">
          <div class="search" v-show="allVideos">
            <div class="search-input">
              <el-input clearable v-model="content" placeholder="请输入视频名称,发布人"></el-input>
            </div>
            <div class="choose-label">
              <el-select v-model="tagIds" filterable multiple collapse-tags clearable placeholder="请选择">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <!-- 请选择分类 -->
            <div class="choose-Select">
              <el-select v-model="partitionType" @change="admincategorypage" clearable placeholder="请选择">
                <el-option v-for="item in optionSelect" :key="item.values" :label="item.labels" :value="item.values">
                </el-option>
              </el-select>
            </div>
            <div class="choose-Select">
              <el-cascader placeholder="请选择" v-model="categoryId" :options="optionscates" clearable :props="{
                children: 'sonCategoryList',
                value: 'id',
                label: 'name',
                emitPath: false,
              }"></el-cascader>
            </div>
            <!-- 查询 -->
            <div class="btn">
              <el-button @click="pageNo = 1, adminvideopage()"></el-button>
            </div>
          </div>

          <!-- 回收站 -->
          <div class="search" v-show="back">
            <div class="search-input">
              <el-input clearable v-model="content" placeholder="请输入视频名称,发布人"></el-input>
            </div>
            <!-- 查询 -->
            <div class="btn">
              <el-button @click="pageNo = 1, adminvideorecyclepage()"></el-button>
            </div>
          </div>
          <!-- 全部视频 -->
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="'全部视频(' + total + ')'" name="first">
              <!-- 全部视频内容 -->
              <el-empty v-if="vodeolist.length == 0" description="暂无数据"></el-empty>
              <div class="video-content flex jc-sb" v-for="item in vodeolist" :key="item.id">
                <div class="flex">
                  <!-- 图片区域 -->
                  <div class="video-pic">
                    <el-image fit="cover" style="width: 120px; height: 120px" :src="item.imgUrl"
                      :preview-src-list="[item.imgUrl]">
                    </el-image>
                  </div>
                  <!-- 文字区域 -->
                  <div class="video-text">
                    <p class="video-title">
                      {{ item.name }}
                    </p>
                    <p class="video-say">
                      {{ item.introduction }}
                    </p>
                    <!-- 标签 -->
                    <div class="tag">
                      <el-tag v-for="it in item.tagVoList" :key="it.id">{{
                          it.name
                      }}</el-tag>
                    </div>
                    <!-- 时间 -->
                    <div class="video-time">
                      <p class="name">{{ item.account }}</p>
                      <p class="time">{{ item.createTime }}</p>
                      <p class="case" v-if="item.categoryVo">
                        {{ item.partitionId | wherearea }}
                        <span>>>{{ item.categoryVo.name }}</span>
                        <span v-if="item.categoryVo.sonCategoryList">>>{{ item.categoryVo.sonCategoryList[0].name
                        }}</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="del-btn">
                  <el-button @click="clickquery(item)">编辑</el-button>
                  <el-button icon="el-icon-delete" @click="setremovedialogVisible(item)">删除</el-button>
                  <el-button @click.native="see(item)">查看</el-button>
                </div>
              </div>
              <!-- 分页 -->
              <div class="page flex jc-c ai-c">
                <div class="page-numBer">
                  <div class="block">
                    <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                      :current-page="pageNo" @current-change="currentchange">
                    </el-pagination>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="'回收站(' + totalss + ')'" name="second">
              <!-- 回收站内容 -->
              <!-- 全部视频内容 -->
              <div class="video-content flex jc-sb" v-for="item in vodeolistcirSys" :key="item.id">
                <div class="flex">
                  <!-- 图片区域 -->
                  <div class="video-pic">
                    <el-image fit="cover" style="width: 120px; height: 120px" :src="item.imgUrl"
                      :preview-src-list="[item.imgUrl]">
                    </el-image>
                  </div>
                  <!-- 文字区域 -->
                  <div class="video-text">
                    <p class="video-title">
                      {{ item.name }}
                    </p>
                    <p class="video-say">
                      {{ item.introduction }}
                    </p>
                    <!-- 标签 -->
                    <div class="tag">
                      <el-tag v-for="it in item.tagVoList" :key="it.id">{{
                          it.name
                      }}</el-tag>
                    </div>
                    <!-- 时间 -->
                    <div class="video-time">
                      <p class="name">{{ item.account }}</p>
                      <p class="time">{{ item.createTime }}</p>
                      <p class="pass" v-if="item.auditStatus == 20">审核通过</p>
                      <p class="pass" v-if="item.auditStatus == 10">审核中</p>
                      <p class="pass" style="color: red" v-if="item.auditStatus == 30">
                        审核失败
                      </p>
                      <p class="pass" style="color: red" v-if="item.auditStatus == 40">
                        草稿
                      </p>
                    </div>
                  </div>
                </div>

                <!-- 恢复 -->
                <div class="recovery-btn">
                  <el-button @click="setrecoverydialogVisible(item)">恢复</el-button>
                  <!-- 彻底删除第一个 -->
                  <el-button @click="setCompletelydelete(item)" icon="el-icon-delete" class="Completelydelete">彻底删除
                  </el-button>
                  <el-button @click.native="see(item)">查看</el-button>
                </div>
              </div>
              <el-empty v-if="vodeolistcirSys.length == 0" description="暂无数据"></el-empty>
              <!-- 分页 -->
              <div class="page flex jc-c ai-c">
                <div class="page-numBer">
                  <div class="block">
                    <el-pagination background layout="prev, pager, next" :total="totalss" :page-size="pageSize"
                      :current-page="pageNo" @current-change="currentchangehuishou">
                    </el-pagination>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 标签列表 -->

      <!-- 分类列表 -->
    </div>
    <v-videodetails v-if="!isShowDetails" @edidshow="clickquery" @back="backfan" :info="info" />
    <el-dialog title="恢复" center :visible.sync="recoverydialogVisible" width="445px">
      <div class="flex fd-c jc-c ai-c">
        <span>确定恢复?</span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="recoverydialogVisible = false">取 消</el-button>
        <el-button class="surebtn" @click="adminvideorecover">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑" center :visible.sync="adddialogVisible" width="445px">
      <div class="add-input">
        <el-form :model="edidinfo" ref="ruleForm" label-width="80px" class="demo-ruleForm">
          <el-form-item label="视频分类" prop="categoryId" required>
            <el-cascader style="width: 100%" placeholder="请选择" v-model="edidinfo.categoryId"
              :options="categoryIdDataList" :props="{
                children: 'sonCategoryList',
                value: 'id',
                label: 'name',
                emitPath: false,
              }"></el-cascader>
          </el-form-item>
          <el-form-item label="视频标签" prop="tagIds">
            <el-select style="width: 100%" v-model="edidinfo.tagIds" :reserve-keyword="true" default-first-option
              :filterable="true" multiple placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="edidinfo.partitionId == 2" label="抖音点赞" prop="tiktokCollectionNum">
            <el-input clearable v-model="edidinfo.tiktokLikeNum" placeholder="请输入抖音点赞"></el-input>
          </el-form-item>
          <el-form-item v-if="edidinfo.partitionId == 2" label="抖音评论" prop="tiktokCommentNum">
            <el-input v-model="edidinfo.tiktokCommentNum"></el-input>
          </el-form-item>
          <el-form-item v-if="edidinfo.partitionId == 2" label="抖音转发" prop="tiktokForwardNum">
            <el-input v-model="edidinfo.tiktokForwardNum"></el-input>
          </el-form-item>
          <el-form-item v-if="edidinfo.partitionId == 2" label="抖音收藏" prop="tiktokCollectionNum">
            <el-input v-model="edidinfo.tiktokCollectionNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="adddialogVisible = false">取 消</el-button>
        <el-button class="surebtn" @click="
  adddialogVisible = false;
adminvideoupdatevideo();
        ">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除" center :visible.sync="removedialogVisible" width="445px">
      <div class="flex fd-c jc-c ai-c">
        <span>确定删除?</span>
        <p style="margin-top: 10px">
          (删除后可前往<span class="recycle" @click="recyclebin()">回收站</span>恢复。)
        </p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="removedialogVisible = false">取 消</el-button>
        <el-button class="surebtn" @click="adminvideorecycle()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 彻底删除 -->
    <el-dialog title="彻底删除" center :visible.sync="Completelydelete" width="445px">
      <div class="flex fd-c jc-c ai-c">
        <span>删除后不可恢复,确认删除?</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="Completelydelete = false">取 消</el-button>
        <el-button class="surebtn" @click="adminvideodelete">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 视频详情 -->
  </div>
</template>
<script>
import videodetails from "@/component/videodetails.vue";
import {
  adminvideopage,
  admincategorypage,
  admintagalllist,
  adminvideorecyclepage,
  adminvideodelete,
  adminvideorecycle,
  adminvideorecover,
  adminvideoupdatevideo,
  adminvideoinfoAdmin,
} from "@/api/index";
export default {
  components: {
    "v-videodetails": videodetails,
  },
  // 存放数据
  data() {
    return {
      inputValue: "",
      navList: [
        {
          id: "1",
          name: "首页",
        },
        {
          id: "2",
          name: "视频管理",
        },
        {
          id: "3",
          name: "用户管理",
        },
        {
          id: "4",
          name: "数据统计",
        },
        {
          id: "5",
          name: "系统设置",
        },
      ],
      listIndex: 0,
      isnavbg: false,
      checked: true,
      success: true,
      successs: true,
      successThird: true,
      successFour: true,
      successFive: true,
      successSix: true,
      isActive: 0,
      isVideo: false,
      huiShow: true,
      listContent: [
        {
          name: "视频列表",
        },
        {
          name: "标签列表",
        },
        {
          name: "分类列表",
        },
        {
          name: "水印列表",
        },
      ],
      input: "",
      inputs: "",
      activeName: "first",
      // 回收站
      recyclingShow: false,
      //  删除
      removeShow: true,
      removeShowsecond: true,
      removeShowthird: true,
      removedialogVisible: false,
      removeseconddialogVisible: false,
      removethirddialogVisible: false,

      // 恢复
      recoverydialogVisible: false,
      recoverydialogVisiblesecond: false,
      recoverydialogVisibleThird: false,

      // 彻底删除
      Completelydelete: false,
      Completelydeletesecond: false,
      CompletelydeleteThird: false,
      huishowSecond: true,
      huishowThird: true,
      // 选择标签
      options: [],
      value: "",
      // 请选择分类
      optionSelect: [
        {
          values: "",
          labels: "全部",
        },
        {
          values: 2,
          labels: "案例区",
        },
        {
          values: 3,
          labels: "成品区",
        },
        {
          values: 4,
          labels: "素材区",
        },
      ],
      // 分类列表
      optionsClasslist: [
        {
          valueList: "选项1",
          labelList: "请选择状态",
        },
        {
          valueList: "选项2",
          labelList: "有效",
        },
        {
          valueList: "选项3",
          labelList: "无效",
        },
      ],

      multipleSelection: [],
      // 视频列表
      videoList: 0,
      // 回收站隐藏
      back: false,
      allVideos: true,
      values: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      // 分页
      pageNum: [
        {
          value: 5,
          numBer: "5条/页",
        },
        {
          value: 10,
          numBer: "10条/页",
        },
        {
          value: 15,
          numBer: "15条/页",
        },
      ],
      Numone: "",
      dialogVisible: false,
      // 标签页

      tags: [
        { name: "标签一", type: "" },
        { name: "标签二", type: "success" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "warning" },
        { name: "标签五", type: "danger" },
      ],
      // 用户列表树节点
      trees: [
        {
          label: "首页",
          children: [
            {
              label: "案例区",
            },
            {
              label: "成片区",
            },
            {
              label: "素材区",
            },
          ],
        },
      ],
      valuepage: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      optionscates: [],
      categoryId: "",
      partitionType: "",
      pageNo: 1,
      pageSize: 4,
      tagIds: [],
      content: "",
      total: 0,
      totalss: 0,
      vodeolist: [],
      delid: "",
      huifuid: "",
      adddialogVisible: false,
      tabPosition: "videolist",
      videoid: "",
      edittagIds: [],
      vodeolistcirSys: [],
      isShowDetails: true,
      info: {},
      edidinfo: {
        categoryId: "",
        id: "",
        tagIds: [],
        tiktokCollectionNum: "",
        tiktokCommentNum: "",
        tiktokForwardNum: "",
        tiktokLikeNum: "",
      },
      categoryIdDataList: [],
    };
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f2f2f2;");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
  created() {
    this.admintagalllist();
    this.admincategorypage();
    this.adminvideopage();
    this.adminvideorecyclepage();
  },
  filters: {
    wherearea(val) {
      if (val == 2) {
        return "案例区";
      } else if (val == 3) {
        return "成品区";
      } else if (val == 4) {
        return "素材区";
      }
    },
  },
  methods: {
    backfan() {
      // this.info = {};
      this.isShowDetails = true;
    },
    adminvideoupdatevideo() {
      let parmas = {};
      if (this.edidinfo.partitionId == 2) {
        parmas = {
          categoryId: this.edidinfo.categoryId,
          id: this.edidinfo.id,
          tagIds: this.edidinfo.tagIds,
          tiktokCollectionNum: this.edidinfo.tiktokCollectionNum,
          tiktokCommentNum: this.edidinfo.tiktokCommentNum,
          tiktokForwardNum: this.edidinfo.tiktokForwardNum,
          tiktokLikeNum: this.edidinfo.tiktokLikeNum,
        };
      } else {
        parmas = {
          categoryId: this.edidinfo.categoryId,
          id: this.edidinfo.id,
          tagIds: this.edidinfo.tagIds,
        };
      }
      adminvideoupdatevideo(parmas).then((res) => {
        this.$message.success("编辑成功");
        adminvideoinfoAdmin({
          videoId: this.edidinfo.id,
        }).then((res) => {
          this.isShowDetails = true;
          this.info = res.data;
          this.adminvideopage();
        });
      });
    },
    clickquery(item) {
      this.edidinfo = item;
      this.$set(this.edidinfo, "tagIds", []);
      if (item.tagVoList) {
        this.edidinfo.tagIds = item.tagVoList.map((it) => it.id);
      }

      admincategorypage({
        partitionType: item.partitionId || "",
      }).then((res) => {
        this.adddialogVisible = true;
        this.categoryIdDataList = res.data;
      });
    },
    see(item) {
      adminvideoinfoAdmin({
        videoId: item.id,
      }).then((res) => {
        this.info = res.data;
        this.isShowDetails = false;
      });
    },
    setCompletelydelete(item) {
      this.delid = item.id;
      this.Completelydelete = true;
    },
    adminvideorecover() {
      adminvideorecover({
        videoId: this.huifuid,
      }).then((res) => {
        this.$message.success("恢复视频成功");
        this.adminvideorecyclepage();
        this.recoverydialogVisible = false;
      });
    },
    setrecoverydialogVisible(item) {
      console.log(item);
      this.huifuid = item.id;
      this.recoverydialogVisible = true;
    },
    adminvideorecycle() {
      adminvideorecycle({
        videoId: this.delid,
      }).then((res) => {
        this.$message.success("删除成功");
        this.adminvideopage();
        this.removedialogVisible = false;
      });
    },
    adminvideodelete() {
      adminvideodelete({
        videoId: this.delid,
      }).then((res) => {
        this.$message.success("彻底删除成功");
        this.adminvideorecyclepage();
        this.Completelydelete = false;
      });
    },
    setremovedialogVisible(item) {
      console.log(item);
      this.delid = item.id;
      this.removedialogVisible = true;
    },
    adminvideorecyclepage() {
      adminvideorecyclepage({
        content: this.content,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }).then((res) => {
        console.log(res);
        this.vodeolistcirSys = res.data.list;
        this.totalss = res.data.total;
      });
    },
    currentchange(val) {
      this.pageNo = val;
      this.adminvideopage();
    },
    currentchangehuishou(val) {
      this.pageNo = val;
      this.adminvideorecyclepage();
    },
    admintagalllist() {
      admintagalllist({}).then((res) => {
        this.options = res.data;
      });
    },
    admincategorypage() {
      admincategorypage({
        status: 10,
        partitionType: this.partitionType || "",
      }).then((res) => {
        this.optionscates = res.data;
      });
    },
    adminvideopage() {
      adminvideopage({
        categoryId: this.categoryId,
        content: this.content,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        partitionType: this.partitionType,
        tagIds: this.tagIds,
      }).then((res) => {
        this.total = res.data.total;
        this.vodeolist = res.data.list;
      });
    },
    handleClick(tab, event) {
      this.content = "";
      this.pageNo = 1;
      this.pageSize = 4;
      this.allVideos = !this.allVideos;
      this.back = !this.back;
      if (tab.index == 0) {
        this.allVideos = true;
        this.back = false;
        this.adminvideopage();
      } else {
        this.allVideos = false;
        this.back = true;
        this.adminvideorecyclepage();
      }
    },
    // 删除
    sure() {
      this.removeShow = false;
    },

    sureSecond() {
      this.removeShowsecond = false;
    },

    sureThird() {
      this.removeShowthird = false;
    },

    // 回收站
    recyclebin() {
      this.$router.push({
        path: "/backlist",
      });
      console.log("123");
    },

    // 恢复

    CompletelydeleteShow() {
      this.huiShow = false;
    },

    backShowSecond() {
      this.huishowSecond = false;
    },

    backShowThird() {
      this.huishowThird = false;
    },

    // 标签

    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    // 删除
    remove() {
      this.$confirm("确定删除?", "删除", {
        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //     remove(){
    //  console.log('123')
    // },
    // 树形节点
    handleNodeClick(trees) {
      console.log(trees);
    },
  },
  // 表格
  toggleSelection(rows) {
    if (rows) {
      rows.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row);
      });
    } else {
      this.$refs.multipleTable.clearSelection();
    }
  },
  // handleSelectionChange(val) {
  //   this.multipleSelection = val;
  // },
  showInput() {
    this.inputVisible = true;
    this.$nextTick((_) => {
      this.$refs.saveTagInput.$refs.input.focus();
    });
  },

  handleInputConfirm() {
    let inputValue = this.inputValue;
    if (inputValue) {
      this.dynamicTags.push(inputValue);
    }
    this.inputVisible = false;
    this.inputValue = "";
  },

  // 分页
  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
  },
  // 退出
  out() {
    this.$router.push({
      path: "/",
    });
  },
};
</script>
<style lang="scss" scoped>
// 头部内容
.header {
  width: 100%;
  min-width: 1200px;
  height: 35px;
  display: flex;
  padding-top: 10px;

  justify-content: space-around;
  background-color: rgb(84, 92, 100);

  .header-left {
    margin-top: -4px;
    margin-left: 87px;
    color: white;

    span {
      display: inline-block;
      margin-left: 10px;
      font-size: 28px;
      font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
      font-weight: 700;
    }
  }

  .navVideo {
    width: 120px;
    height: 41px;

    border-bottom: 1px solid rgb(255, 208, 75);
    border-bottom-color: rgb(255, 208, 75);

    a {
      color: rgb(255, 208, 75) !important;
    }
  }

  .header-nav {
    width: 787px;
    position: relative;
    top: -7px;
    margin-right: 458px;
  }

  .header-nav>div {
    display: flex;

    justify-content: space-between;

    a {
      color: white;
      font-size: 18px;
      font-weight: 700;
      text-decoration: none;
    }
  }

  .header-login {
    width: 200px;
    display: flex;
    justify-content: space-around;
  }

  .header-user {
    position: relative;
    margin-top: 3px;
  }

  span {
    font-size: 14px;
    display: inline-block;
    margin-right: 10px;
  }

  img {
    position: absolute;
    top: 9px;
  }

  .header-out {
    margin-top: 3px;
  }
}

.main-video {
  // width: 100%;
  // min-width: 1025px;
  margin-top: 24px;
}

// 视频列表
.video {
  width: 100%;
  margin-top: 24px;
  min-width: 1200px;

  .list-content {
    width: 1378px;
    height: 52px;
    padding-left: 53px;
    margin: 0 auto;
    display: flex;
    min-width: 1200px;
    background-color: white;
  }

  .list-content>div {
    width: 112px;
    height: 30px;

    margin-top: 12px;
    border-color: #aaaaaa;
    // border-radius: 5px;

    // border-top-right-radius: 0px;
    // border-bottom-right-radius: 0px;
    box-sizing: border-box;
    border: 1px solid #aaaaaa;
    text-align: center;
  }

  .list-content>div:hover {
    cursor: pointer;
  }

  a {
    font-size: 13px;
    text-decoration: none;
    margin-top: 5px;
    color: #333333;
    display: inline-block;
  }
}

.sure-del {
  margin-left: 10px;
}

.active {
  background-color: #aaaaaa;

  a {
    color: white;
  }
}

// 全部视频
.main-all-video {
  // width: 100%;
  // min-width: 1200px;
  margin-top: 24px;

  .main-all-content {
    // height: 772px;
    background: #ffffff;
    box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
    border-radius: 16px;
    position: relative;
    padding-left: 53px;
    background-color: white;
    box-sizing: border-box;
    padding-top: 20px;
    box-sizing: border-box;
    padding-right: 15px;
    // min-height: calc(100vh - 229px);

    .search {
      width: calc(100% - 400px);
      display: flex;
      position: relative;
      margin: 0 auto;
      justify-content: flex-end;
      align-items: center;
      font-weight: 400;
      color: #000000;
      margin-bottom: 48px;
      position: absolute;
      right: 15px;
      top: 10px;
      z-index: 10;

      .search-input {
        // width: 250px;
        // margin-top: 3px;
      }

      .choose-label {
        width: 150px;
        margin-left: 20px;
      }

      .choose-Select {
        margin-left: 20px;

        input {
          width: 153px;
        }
      }

      .btn {
        margin-left: 15px;

        // margin-top: 1px;
        button {
          width: 61px;
          height: 40px;
          background-size: 19px 20px;
          border: none;
          background-repeat: no-repeat;
          background-position: center;
          text-align: center;
          background-color: #ff5478;
          background-image: url("../assets/btnsearch.png");
          align-items: center;

          span {
            text-align: center;
          }
        }
      }
    }
  }
}

.page-select .el-input__inner {
  height: 21px;
}

.page-select-back {
  margin-top: 4px;
  width: 100px;
}

.el-button {
  padding: 11px 20px;
}

.el-tabs__item {
  height: 22px !important;
  line-height: 13px !important;
}

// 全部视频内容
.video-content {
  width: 100%;
  margin-top: 10px;
  // justify-content: flex-start;
  // margin-left: 25px;
  border-bottom: 1px solid #e4e7ed;
  // display: flex;
}

.recycle {
  color: #ff5478;
  text-decoration: none;
}

.video-pic {
  margin-right: 35px;
  // padding-bottom: 15px;
}

.video-text {
  // width: 750px;
  position: relative;

  p {
    margin-bottom: 9px;
  }
}

.del-btn {
  // width: 146px;
  height: 35px;
  display: flex;
  margin-top: 30px;
  // background-color: white;

  button {
    width: 89px;
    height: 35px;
    margin-right: 15px;
    padding-top: 10px;
    text-align: center;
    // color: white;
    // background-color: #f56c6c;
    // border: 1px solid #f56c6c;
    outline: none;
    cursor: pointer;
    border-radius: 5px;
  }

  .Completelydelete {
    width: 100px;
  }
}

.recovery-btn {
  display: flex;
  height: 35px;
  margin-top: 30px;

  button {
    padding-top: 10px;
  }
}

.tag {
  span {
    display: inline-block;
    margin-bottom: 10px;

    margin-right: 20px;
  }
}

.video-title {
  color: #333333;
  font-size: 14px;
}

.video-say {
  font-size: 14px;
  color: #7f7f7f;
}

.video-time {
  // width: 700px;
  display: flex;
  justify-content: flex-start;
  margin-left: 3px;

  .name {
    font-size: 14px;
    color: #7f7f7f;
    margin-left: 18px;
    margin-right: 24px;
  }

  .time {
    font-size: 14px;
    color: #333333;
    margin-right: 24px;
    margin-left: 25px;
  }

  .case {
    font-size: 14px;
    color: #7f7f7f;
  }

  // 审核通过
  .pass {
    color: #58c192;
    font-size: 14px;
  }
}

.linepic {
  margin-right: 20px;
}

.el-tabs__nav-wrap::after {
  width: 98%;
}

// 分页

.page {
  // position: absolute;
  // left: 50%;
  // bottom: 15px;
  // transform: translate(-50%, 0);
  width: 100%;
  margin-bottom: 10px;
  // margin-top: 30vh;
}

.page-numBer {
  margin-top: 10px;
}

.page input {
  height: 21px !important;
}

.five-page {
  width: 96px;
}

.page-num {
  width: 55px;
  margin-top: 16px;
  // margin-right: 15px;
}

span {
  font-size: 14px;
}

.page-select-back .el-input {
  margin-right: 15px;
  width: 100px;

  input {
    padding-right: 35px;
    width: 113px;
  }
}

.page-select-fen {
  margin-right: 15px;
  margin-top: 4px;
  width: 100px;

  input {
    padding-right: 35px;
    width: 113px;
  }
}

.el-select .el-input__inner {
  cursor: pointer;
}

.go-page {
  width: 500px;
  margin-top: 13px;

  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }

  input {
    width: 35px;
    outline: none;
    border-radius: 3px;
    height: 25px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}

.el-input__icon {
  line-height: 21px !important;
}

// 标签列表
.tagList {
  width: 1378px;
  margin-top: 15px;
  height: 697px;
  min-width: 1200px;
  margin: 0 auto;
  margin-top: 15px;
  padding-left: 53px;
  background-color: white;
}

.tagContent {
  width: 1378px;
  position: relative;
  min-width: 1200px;
  display: flex;

  justify-content: center;
}

.tagCenter {
  width: 1240px;

  margin-left: 25px;
  border-top: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
}

.tagText {
  margin-top: 15px;

  p {
    font-size: 14px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 13px;
  }
}

.tag-last {
  border-bottom: none;
}

.tagOne {
  // width: 700px;
  border-bottom: 1px solid #e4e7ed;

  button {
    width: 70px !important;
    height: 41px !important;
    padding: 12px 7px !important;
  }

  span {
    display: inline-block;
    // margin-right: 20px;
    margin-bottom: 20px;
  }
}

.tag-input {
  width: 300px;
  position: relative;
  height: 35px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tag-btn {
  position: absolute;
  margin-top: 20px;

  margin-bottom: 20px;
  right: 372px;

  button {
    text-align: center;
    align-items: center;
  }
}

// .el-tabs__header {
//    width: 500px !important;
// }
// .el-tabs__header .is-top {
//  width: 500px !important;
// }
.el-tabs__nav-wrap {
  margin-top: 15px !important;
}

// 标签
.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

// 分类列表
.user-list {
  width: 1429px;
  margin-top: 15px;
  height: 535px;
  min-width: 1200px;
  padding-bottom: 105px;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  margin-top: 15px;
  // padding-left: 53px;

  background-color: white;
}

.user-left {
  width: 200px;
  padding-right: 10px;
  border-right: 1px solid #f2f2f2;
  margin-top: 40px;
}

.user-right {
  width: 990px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 38px;
}

.user-input {
  width: 300px;
  height: 0px;
  margin-right: 30px;

  input {
    width: 300px;
  }
}

.user-select {
  margin-right: 23px;
  height: 0px;
}

.form-list {
  width: 901px;
  margin-bottom: 24px;
  border-radius: 3px;

  table {
    width: 898px;
    height: 30px;
    text-align: center;
    margin-top: 35px;
    // border: 1px solid #ebebeb;

    tr {
      height: 30px;
      line-height: 30px;

      td {
        width: 130px;
        height: 50px;
        line-height: 50px;
        font-size: 13px;
        // border-right: 1px solid #ebebeb;
        // border-bottom: 1px solid #ebebeb;

        // border-top: 1px solid #ebebeb;

        border: 1px solid #ebebeb;

        .three-btn {
          width: 300px;

          margin: 0 auto;
          justify-content: center;
          text-align: center;
          display: flex;
        }

        button {
          width: 61px;
          padding: 11px 15px;
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
.toubudaohang {
  width: 100%;
  height: 84px;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2);
  border-radius: 16px;
  padding-left: 30px;
  box-sizing: border-box;
}
</style>
<style scoped lang="scss">
.main-all-content ::v-deep .el-tabs__content {
  position: static;
}
</style>